import React from 'react'
import { JumboTabs } from 'antd-mobile'
import { $pre } from "../../../../http/http";
import {Link} from "react-router-dom"
import "./Tindexgoods.less"





export default function Tindexgoods(props) {
  let { tindexgoods,n,onChangeN } = props
  let navs = ["热门商品", "猜你喜欢", "全部商品","热卖商品"];

  return (
    <div className='goods'>

<JumboTabs onChange={key=>onChangeN(key)}>
        {navs.map((item,index) => {
          return (
            <JumboTabs.Tab title={item} key={index+''}>
              {tindexgoods.length > 0 ? (
                <div>
                  {tindexgoods[n].content.map((i) => {
                    return (
                      <Link to={`/goods/${i.id}/1`} className="card" key={i.id}>
                        <img src={$pre + i.img} alt="" />
                        <div className="right">
                          <h3>商品名称：{i.goodsname}</h3>
                          <div>价格：{i.price}</div>
                        </div>
                      </Link>
                    );
                  })}
                </div>
              ) : (
                <div>暂无数据</div>
              )}
            </JumboTabs.Tab>
          );
        })}
      </JumboTabs>
    </div>
  )
}
